<template>
  <div class="graph-con">
    <div class="loading" v-if="loading"><i class="el-icon-loading"></i></div>
    <div v-if="!isData" class="is-data">{{ text }}</div>
    <div id="container" ref="graph" style="height: 100%"></div>
  </div>
</template>

<script>
import treeGraph from "./treeGraph";
import relateGraph from "./relateGraph";
import compactTreeGraph from "./compactTreeGraph";
export default {
  data() {
    return {
      allNodes: {
        id: "C",
        label: "氢能产业链",
        collapsed: false,
        children: [],
      },
      loading: false,
      text: "暂无数据。。。",
      isData: true,
      graph: null,
      garaphData: {
        combos: [],
        nodes: [],
      },
      data_map: {
        nodes: [
          { id: "node2", x: 300, y: 200, label: "i系统", comboId: "combo2" },
          { id: "node4", x: 300, y: 300, label: "i系统", comboId: "combo4" },
          { id: "node5", x: 300, y: 400, label: "i系统", comboId: "combo4" },
          { id: "node6", x: 300, y: 500, label: "i系统1", comboId: "combo2" },
          { id: "node7", x: 300, y: 400, label: "i系统2", comboId: "combo4" },

          {
            id: "node3",
            x: 100,
            y: 200,
            label: "数据工厂系统",
            comboId: "combo3",
          },
          {
            id: "node1",
            x: 500,
            y: 200,
            label: "数据工厂系统",
            comboId: "combo1",
          },
        ],
        combos: [
          { id: "combo2", label: "Combo 2" },
          { id: "combo3", label: "Combo 3" },
          { id: "combo1", label: "Combo 1" },
          { id: "combo4", label: "Combo 4", parentId: "combo2" },
        ],
        edges: [
          {
            source: "node3",
            target: "node5",
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
    //方案一：思维导图树图左右分布
    // treeGraph.sendThis(this);
    // this.graph = treeGraph.myfun(this.$refs.graph);
    //方案二：Combo 力导向布局
    // relateGraph.sendThis(this);
    // this.graph = relateGraph.myfun(this.$refs.graph);
    //方案三：紧凑树自上而下布局
    compactTreeGraph.sendThis(this);
    this.graph = compactTreeGraph.myfun(this.$refs.graph);
  },
  methods: {
    init() {
      this.getAllData();
    },
    // 获取全部节点数据
    getAllData() {
      this.loading = true;
      this.isData = true;
      this.$get(this.$Url.industrial.allNodeList, {
        parent: "C",
      }).then((res) => {
        this.loading = false;
        if (res.data.length > 0) {
          //方案二：Combo 力导向布局
          // this.garaphData = this.changeGraphData(
          //   this.garaphData,
          //   res.data,
          //   null,
          //   null,
          //   0
          // );
          // this.graph.data(this.garaphData);
          // // this.graph.data(this.data_map);
          // this.graph.render();
          // this.graph.fitView();
          //方案一：思维导图树图左右分布
          // this.allNodes.children = this.changeData(res.data, 0);
          // this.graph.data(treeGraph.dataTransform(this.allNodes));
          // this.graph.render();
          // this.graph.fitView();
          //方案三：紧凑树自上而下布局
          this.allNodes.children = this.changeData(res.data, 0);
          this.graph.data(this.allNodes);
          this.graph.render();
          this.graph.fitView();
        } else {
          this.isData = false;
        }
      });
    },
    //方案二：Combo 力导向布局
    changeGraphData(garaphData, data, val, order, num) {
      data.map((item, index) => {
        if (
          garaphData.nodes.find((val) => val.id === item.code) ||
          garaphData.combos.find((val) => val.id === item.code)
        )
          return;
        const arr = garaphData.nodes.filter((item) => item.order === order);
        const arrCode = arr.filter((item) => item.comboId === val.code);

        if (num > 1) {
          garaphData.nodes.push({
            id: item.code,
            label: item.name,
            comboId: val ? val.code : null,
            order: order,
            x: arr[arr.length - 1]
              ? arr[arr.length - 1].x === (order + 1) * 500 &&
                arr[arr.length - 1].comboId === val.code
                ? (order + 1) * 500 + 200
                : (order + 1) * 500
              : (order + 1) * 500,
            y: arr[arr.length - 1]
              ? arrCode.length > 0 && arrCode.length % 2 !== 0
                ? arrCode[arrCode.length - 1].y
                : arr[arr.length - 1].y + 100
              : 100,
          });
        } else {
          if (val) {
            garaphData.combos.push({
              id: item.code,
              label: item.name,
              parentId: val.code,
            });
          } else {
            garaphData.combos.push({
              id: item.code,
              label: item.name,
            });
          }
        }
        if (num < 2) {
          this.changeGraphData(
            garaphData,
            item.child,
            item,
            Boolean(val) ? order : index,
            num + 1
          );
        }
      });
      return garaphData;
    },
    //方案一：思维导图树图左右分布
    changeData(data, num) {
      let newData = [];
      data.map((item) => {
        if (newData.find((val) => val.id === item.code)) return;
        newData.push({
          // ...item,
          id: item.code,
          label: item.name,
          collapsed: num > 1 ? true : false,
          children:
            item.child.length > 0
              ? this.changeData(item.child, num + 1)
              : item.child,
        });
      });
      return newData;
    },
    clickNode(code) {
      this.$emit("changeCode", code);
    },
  },
};
</script>

<style lang="scss" scoped>
.graph-con {
  flex: 1;
  height: 100%;
  position: relative;
  .is-data {
    height: 100%;
    width: 100%;
    font-size: 20px;
    text-align: center;
    line-height: 600px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .loading {
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 60px;
    text-align: center;
    color: #524cab;
    line-height: 600px;
    font-weight: 700;
  }
}
</style>